<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>注册小米帐号</title>
	<load href="__PUBLIC__/css/reset.css" />
	<load href="__PUBLIC__/css/base.css"/>
		 <script type="text/javascript" src="__PUBLIC__/js/jquery-2.1.4.min.js"></script>

     <style>
		#reguser{
width: 200px
	}
	#reuser{
		width: 200px
	}
	#regpass{
		width: 200px
	}

     </style>
</head>
<body>
	<div class="warper">
		<div class="warper">
			<div class="layout">
				<div class="login-main">
					<div class="lgheader">
						<div class="header_tit">
							<em id="custom_display_1" class="milogo">
                  <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"><rect width="50" height="50" style="fill:#ef5b00"></rect><rect x="11.25" y="15" width="5" height="20" style="fill:#FFFFFF"></rect><rect x="11.25" y="15" width="12.5" height="5" style="fill:#FFFFFF"></rect><rect x="26.25" y="22.5" width="5" height="12.5" style="fill:#FFFFFF"></rect><rect x="33.75" y="15" width="5" height="20" style="fill:#FFFFFF"></rect><circle cx="23.75" cy="22.5" r="7.5" fill="#FFFFFF"></circle><rect x="16.25" y="20" width="7.5" height="15" style="fill:#ef5b00"></rect><rect x="16.25" y="22.5" width="10" height="12.5" style="fill:#ef5b00"></rect><circle cx="23.75" cy="22.5" r="2.5" fill="#ef5b00"></circle><rect x="18.75" y="22.5" width="5" height="12.5" style="fill:#FFFFFF"></rect></svg>
                </em>
						<h4 class="header_tit_txt" id="login-title">注册小米帐号</h4>

						<div class=" site_info"></div>
						</div>
					</div>
					
				 <div class="login_area">
                            
                            <form action="<{:U('Login/do_register')}>" method="post" id="big">
                            <table>
                             <tr>
                                <td><input class="labelbox item_account"   name="phone" id="phone" placeholder="手机" type="text"></td><td>&nbsp;&nbsp;&nbsp;&nbsp;<div id="reguser" style="display:none;margin:7px">11位手机号</div></td>
                                </tr>
                                <tr>
                                <td><input class="labelbox item_account"   name="username" id="username" placeholder="用户名" type="text"></td><td>&nbsp;&nbsp;&nbsp;&nbsp;<div id="reuser" style="display:none;margin:7px">6~12位用户名</div></td>
                                </tr>
                                <tr>
                                <td><input class="labelbox item_account" placeholder="密码"  name="pwd" id="pwd" type="password"></td><td>&nbsp;&nbsp;&nbsp;&nbsp;<div id="regpass" style="display:none;margin:7px">输入6-18位密码</td>
                                </tr>
                            </table>

                                <div class="btns_bg">
                      <input class="btnadpt btn_orange" id="login-button" value="立即登录" type="submit">
                      <span id="custom_display_8" class="sns-default-container sns_default_container" style="display: none;">
                      </span>
                    </div>
                    
                    <fieldset class="oth_type_tit">
                        <legend align="center" class="oth_type_txt">其他方式登录</legend>
                      </fieldset>

                        <div class="oth_type_links">
                            
                        </div> 

                            </form>

                    </div>


				</div>

				<div class="n_links_area" id="custom_display_64">
              <a class="outer-link" href="">注册小米帐号</a><span>|</span>
              <a class="outer-link" href="">忘记密码？</a>
            </div>

			</div>

			
			
		</div>
	</div>
</body>
<script>
	
	$(function(){
			var	input0 = false;
			var	input1 = false;
			var	input2 = false;
			// var	input3 = false;

			 $('#phone').focus(function(){
                  $('#reguser').css('display','block');
            })
            //失去焦时，验证用户
            $('#phone').blur(function(){
                  shouji(this);
                  // console.log('1231');
            })
			function shouji(obj){
				var val=$(obj).val();
				if(val.length){
					var sjcd=/^0?1[3|4|5|8][0-9]\d{8}$/;
					if(sjcd.test(val)){
						 var data={phone:val};
                              $.ajax({
                                    url:'checkphone',
                                    data:data,
                                    type:'post',
                                    success:function(data){
                                          if(data==0){
                                          	    // $(this).append("<button>请求成功!</button>");
                                                $('#reguser').text('√ 手机可以使用').css('color','green');
                                                input0=true;
                                          }else{
                                                $('#reguser').text('× 手机号已存在').css('color','red');
                                                input0=false
                                          }
                                    }
                              })
                          }else{
                              $('#reguser').text('× 手机格式不正确').css('color','red');
                          	
                          }
				}else{
                        $('#reguser').text('手机格式不正确').css('display','none').css('color','#9999A5');
                        input0=false;
                  }
			}

			 $('input:eq(1)').focus(function(){
                  $('#reuser').css('display','block');
            })
            //失去焦时，验证用户
            $('input:eq(1)').blur(function(){
                  yzuser(this);
                  // console.log('1231');
            })
            //验证用户名
            function yzuser(obj){
                  var val = $(obj).val();
                  if(val.length){
                        var yhcd= /^[a-z0-9_-]{3,16}$/;
                        if(yhcd.test(val)){
                              var data={username:val};
                              $.ajax({
                                    url:'checkuser',
                                    data:data,
                                    type:'post',
                                    success:function(data){
                                          if(data==0){
                                                $('#reuser').text('√').css('color','green');
                                                input1=true;
                                          }else{
                                                $('#reuser').text('× 用户名已存在').css('color','red');
                                                input1=false
                                          }
                                    }
                              })
                        }else{
                              $('#reuser').text('× 请输入字母、数字，3-16个字符').css('color','red');
                        }
                  }else{
                        $('#reuser').text('字母、数字、3-16个字符').css('display','none').css('color','#9999A5');
                        input0=false;
                  }
            }


            $('input:eq(2)').focus(function(){
                  $('#regpass').css('display','block');
            })
            //失去焦时，验证密码
            $('input:eq(2)').blur(function(){
                  yzmm(this);
            })
            //验证密码
            function yzmm(obj){
                  var val = $(obj).val();
                  if(val.length){
                        var yhcd = /^[a-z0-9_-]{6,18}$/;
                        if(yhcd.test(val)){
                              $('#regpass').text('√ 密码可以使用').css('color','green');
                              input2=true;
                        }else{
                              $('#regpass').text('× 建议使用字母、数字6-18位密码').css('color','red');
                              input2=false;
                        }
                  }else{
                        $('#regpass').text('请输入6-18位密码').css('display','none').css('color','#9999A5');
                  }
            }
           $("form").submit(function(){
                  return   input0&&input1&&input2;
            })
})
</script>
</html>